<template>
  <div class="switch_content">
    <slot name="label">
      <div class="label" :style="`margin-right:${label ? '10px' : 0}`">
        {{ label }}
      </div>
    </slot>
    <a-switch
      size="small"
      style="width: 28px;"
      :checked-children="checkedChildren"
      :un-checked-children="unCheckedChildren"
      :disabled="disabled"
      :checked="checked"
      @change="onChange"
    />
  </div>
</template>

<script>
/**
 * @interface props
 *   toolTip undefined 不显示tooltip 或者 boolean false
 */
export default {
  name: 'DSwitch',
  props: {
    size: {
      type: String,
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    label: {
      type: [String, undefined],
      default: undefined
    },
    checkedChildren: {
      type: [String, undefined],
      default: undefined
    },
    unCheckedChildren: {
      type: [String, undefined],
      default: undefined
    },
    checked: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onChange(e) {
      this.$emit('update:checked', e);
      this.$emit('change', e);
    }
  }
};
</script>

<style lang="scss">
.tw-switch-checked {
  background-color: #09bb2f !important;
}
.tw-switch-small {
  background-color: #999;
}
</style>
<style lang="scss" scoped>
.switch_content {
  display: flex;
  height: 28px;
  align-items: center;
  .label {
    font-size: 12px;
    color: #666;
  }
}
::v-deep .tw-switch-checked .tw-switch-inner {
  font-size: 12px !important;
  color: white;
  margin-left: 0px !important;
  transform: scale(0.7) !important;
  width: 24px;
  display: flex;
  align-items: center;
}
::v-deep .tw-switch-inner {
  font-size: 12px !important;
  color: white;
  margin-left: 12px !important;
  transform: scale(0.7);
  width: 13px;
  display: flex;
  align-items: center;
}
::v-deep .tw-switch-small {
  min-width: 28px !important;
}
</style>
